<template>
    <layout-card :filters="exampleOptions" headline="遗失物品公示" @search-change="searchChange" @search-reset="searchReset">
      <template #action>
        <el-button type="primary" @click="handleCreate">新增</el-button>
      </template>
      <div class="table-common">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="寻找中" name="first">
                <div class="goods">
                  <div class="goods_content" v-for="(item, index) in tableData" :key="index" @click="goodsClick(item)">
                    <img
                      :src="image.loginBg"
                      class="image"
                    />
                    <div class="message">
                      <div class="message_content">
                        <div class="type">{{ item['type'] === '1' ? '食品' : '其他' }}</div>
                        <div class="terminal">{{ item['terminal'] }}</div>
                      </div>
                      <div class="message_content" style="margin-top: 8px;">
                        <div class="headline">物品类型：</div>
                        <div class="headline_content">{{ item['goodsType'] }}</div>
                      </div>
                      <div class="message_content" style="margin-top: 4px;">
                        <div class="headline">遗失时间：</div>
                        <div class="headline_content">{{ item['loseTime'] }}</div>
                      </div>
                      <div class="message_content" style="margin-top: 4px;">
                        <div class="headline">遗失地：</div>
                        <div class="headline_content">{{ item['losePlace'] }}</div>
                      </div>
                      <div class="message_content" style="margin-top: 4px;">
                        <div class="headline">失主姓名：</div>
                        <div class="headline_content">{{ item['ownersName'] }}</div>
                      </div>
                    </div>
                    <div :class="item['overdue'] === '0' ? 'hidden_overdue' : (item['overdue'] === '1' ? 'red_overdue' : 'green_overdue')">
                      {{ item['overdue'] === '0' ? '' : (item['overdue'] === '1' ? '已过期' : '14小时后过期') }}
                    </div>
                  </div>
                </div>
                <div>
                  <TablePagination
                    :small="false"
                    :pagination="pager"
                    @current-change="currentChange"
                    @size-change="sizeChange"
                  />
                </div>
            </el-tab-pane>
            <el-tab-pane label="已找回" name="second">
              <div class="goods">
                  <div class="goods_content" v-for="(item, index) in tableData" :key="index">
                    <img
                      :src="image.logoIcon"
                      class="image"
                    />
                    <div class="message">
                      <div class="message_content">
                        <div class="type">{{ item['type'] === '1' ? '食品' : '其他' }}</div>
                        <div class="terminal">{{ item['terminal'] }}</div>
                      </div>
                      <div class="message_content" style="margin-top: 8px;">
                        <div class="headline">物品类型：</div>
                        <div class="headline_content">{{ item['goodsType'] }}</div>
                      </div>
                      <div class="message_content" style="margin-top: 4px;">
                        <div class="headline">遗失时间：</div>
                        <div class="headline_content">{{ item['loseTime'] }}</div>
                      </div>
                      <div class="message_content" style="margin-top: 4px;">
                        <div class="headline">遗失地：</div>
                        <div class="headline_content">{{ item['losePlace'] }}</div>
                      </div>
                      <div class="message_content" style="margin-top: 4px;">
                        <div class="headline">失主姓名：</div>
                        <div class="headline_content">{{ item['ownersName'] }}</div>
                      </div>
                    </div>
                    <div :class="item['overdue'] === '0' ? 'hidden_overdue' : (item['overdue'] === '1' ? 'red_overdue' : 'green_overdue')">
                      {{ item['overdue'] === '0' ? '' : (item['overdue'] === '1' ? '已过期' : '14小时后过期') }}
                    </div>
                  </div>
                </div>
                <div>
                  <TablePagination
                    :small="false"
                    :pagination="pager"
                    @current-change="currentChange"
                    @size-change="sizeChange"
                  />
                </div>
            </el-tab-pane>
        </el-tabs>
      </div>
    </layout-card>
    <edit-dialog
      :centerDialogVisible="centerDialogVisible"
      :tilte="tilte"
      @Cancel="Cancel"
      @Submit="Submit"
      :defaultButton="defaultButton"
      :width="dialogWidth"
    >
      <template #content>
        <div class="detail_content">
          <img
            class="content_img"
            :src="image.loginBg"
          />
          <div class="detail_body">
            <div class="body_message">
              <div class="message_title">物品名称：</div>
              <div class="message_content">{{ goodsObject['name'] }}</div>
            </div>
            <div class="body_message">
              <div class="message_title">物品类型：</div>
              <div class="message_content">{{ goodsObject['type'] }}</div>
            </div>
            <div class="body_message">
              <div class="message_title">保质期：</div>
              <div class="message_content">{{ goodsObject['expiration'] }}</div>
            </div>
            <div class="body_message">
              <div class="message_title">失物姓名：</div>
              <div class="message_content">{{ goodsObject['ownersName'] }}</div>
            </div>
            <div class="body_message">
              <div class="message_title">失主电话：</div>
              <div class="message_content">{{ goodsObject['ownersPhone'] }}</div>
            </div>
            <div class="body_message">
              <div class="message_title">遗失时间：</div>
              <div class="message_content">{{ goodsObject['loseTime'] }}</div>
            </div>
            <div class="body_message">
              <div class="message_title">航站楼：</div>
              <div class="message_content">{{ goodsObject['terminal'] }}</div>
            </div>
            <div class="body_message">
              <div class="message_title">具体遗失地：</div>
              <div class="message_content">{{ goodsObject['losePlace'] }}</div>
            </div>
          </div>
        </div>
      </template>
      <template #custom>
        <span class="dialog-footer">
          <el-button class="buttonCancel" @click="centerDialogVisible = false">关闭</el-button>
          <el-button class="buttonOverdue" @click="centerDialogVisible = false">过期处置</el-button>
        </span>
      </template>
    </edit-dialog>
  </template>

<script lang="ts" setup>
import { ref, reactive, onBeforeMount } from 'vue'
import LayoutCard from '@/components/LayoutCard/index.vue'
import type { TabsPaneContext } from 'element-plus'
import editDialog from '@/components/editDialog/index.vue'
import TablePagination from '@/components/TablePagination/index.vue'
import { image } from '@/assets/index'

// 标题名
const activeName = ref('first')
// 新增弹窗是否打开
const centerDialogVisible = ref(false)
// 弹窗标题
const tilte = ref('新增')
const visible = ref(false)
const isAdd = ref(true)
const loading = ref(false)
const tableData = ref([])
const dialogWidth = ref('760px')
const defaultButton = ref(true)
const goodsObject = ref()
const pager = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

/**
 * 标签页点击切换
*/
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

/**
 * 点击新增方法
 */
const handleCreate = () => {
  centerDialogVisible.value = true
  isAdd.value = true
  visible.value = true
}

/**
 * 弹窗点击取消
 */
const Cancel = () => {
  centerDialogVisible.value = false
}

/**
 * 弹窗点击确认
 */
const Submit = () => {
  centerDialogVisible.value = false
}

/**
 * 卡片点击事件
 */
const goodsClick = (item: any) => {
  console.log(item)
  tilte.value = '置过期遗失物品'
  centerDialogVisible.value = true
  dialogWidth.value = '760px'
  defaultButton.value = false
  goodsObject.value = {
    name: '钥匙',
    type: '物品类型',
    expiration: '1年',
    ownersName: '张伟',
    ownersPhone: '13509086789',
    loseTime: '2023-03-03 13:40 - 2023-03-03 13:40',
    terminal: 'T3',
    losePlace: 'T3航站楼A区'
  }
}

// 分页
const sizeChange = (size: number) => {
  pager.pageSize = size
  getData()
}
const currentChange = (value: number) => {
  pager.currentPage = value
  getData()
}
// 查询条件
const exampleOptions = [
  {
    label: '物品类型',
    prop: 'project',
    type: 'select',
    defaultValue: '',
    inputProps: {
      options: [
        { label: '全部', value: '' }
      ]
    }
  },
  {
    label: '物品名称',
    prop: 'name',
    type: 'select',
    inputProps: {
      clearable: true,
      placeholder: '模糊匹配'
    }
  },
  {
    label: '失主姓名',
    prop: 'state',
    type: 'select',
    defaultValue: '',
    inputProps: {
      options: [
        { label: '全部', value: '' }
      ]
    }
  },
  {
    label: '遗失地',
    prop: 'place',
    type: 'select',
    defaultValue: '',
    inputProps: {
      options: [
        { label: '全部', value: '' }
      ]
    }
  },
  {
    label: '航站楼',
    prop: 'place',
    type: 'select',
    defaultValue: '',
    inputProps: {
      options: [
        { label: '全部', value: '' }
      ]
    }
  },
  {
    label: '遗失时间',
    prop: 'endTime',
    type: 'datePicker',
    defaultValue: [],
    inputProps: {
      type: 'daterange',
      'value-format': 'YYYY-MM-DD'
    }
  }
]
const search = ref({})
const getData = () => {
  loading.value = true
  // ...获取数据
  setTimeout(() => {
    const data = {
      list: [
        {
          type: '食品',
          terminal: 'T3',
          goodsType: '一般物品类',
          loseTime: '2023-03-03',
          losePlace: 'T3航站楼A区',
          ownersName: '张伟',
          overdue: '1'
        },
        {
          type: '食品',
          terminal: 'T3',
          goodsType: '一般物品类',
          loseTime: '2023-03-03',
          losePlace: 'T3航站楼A区',
          ownersName: '张伟',
          overdue: '1'
        },
        {
          type: '食品',
          terminal: 'T3',
          goodsType: '一般物品类',
          loseTime: '2023-03-03',
          losePlace: 'T3航站楼A区',
          ownersName: '张伟',
          overdue: '1'
        },
        {
          type: '食品',
          terminal: 'T3',
          goodsType: '一般物品类',
          loseTime: '2023-03-03',
          losePlace: 'T3航站楼A区',
          ownersName: '张伟',
          overdue: '0'
        },
        {
          type: '食品',
          terminal: 'T3',
          goodsType: '一般物品类',
          loseTime: '2023-03-03',
          losePlace: 'T3航站楼A区',
          ownersName: '张伟',
          overdue: '0'
        },
        {
          type: '食品',
          terminal: 'T3',
          goodsType: '一般物品类',
          loseTime: '2023-03-03',
          losePlace: 'T3航站楼A区',
          ownersName: '张伟',
          overdue: '2'
        },
        {
          type: '食品',
          terminal: 'T3',
          goodsType: '一般物品类',
          loseTime: '2023-03-03',
          losePlace: 'T3航站楼A区',
          ownersName: '张伟',
          overdue: '2'
        },
        {
          type: '食品',
          terminal: 'T3',
          goodsType: '一般物品类',
          loseTime: '2023-03-03',
          losePlace: 'T3航站楼A区',
          ownersName: '张伟',
          overdue: '2'
        },
        {
          type: '食品',
          terminal: 'T3',
          goodsType: '一般物品类',
          loseTime: '2023-03-03',
          losePlace: 'T3航站楼A区',
          ownersName: '张伟',
          overdue: '2'
        },
        {
          type: '食品',
          terminal: 'T3',
          goodsType: '一般物品类',
          loseTime: '2023-03-03',
          losePlace: 'T3航站楼A区',
          ownersName: '张伟',
          overdue: '0'
        },
        {
          type: '食品',
          terminal: 'T3',
          goodsType: '一般物品类',
          loseTime: '2023-03-03',
          losePlace: 'T3航站楼A区',
          ownersName: '张伟',
          overdue: '2'
        },
        {
          type: '食品',
          terminal: 'T3',
          goodsType: '一般物品类',
          loseTime: '2023-03-03',
          losePlace: 'T3航站楼A区',
          ownersName: '张伟',
          overdue: '2'
        }
      ],
      total: 100
    }
    loading.value = false
    // @ts-ignore
    tableData.value = data.list
    pager.total = data.total
  }, 500)
}

/**
 * 点击查询
 */
const searchChange = (data: FilterDataType) => {
  search.value = data
  getData()
}

/**
 * 点击重置
 * @param data 数据
 */
const searchReset = (data: FilterDataType) => {
  search.value = data
  pager.currentPage = 1
  pager.pageSize = 10
  getData()
}

onBeforeMount(getData)
</script>

<style lang="less" scoped>
  .table-common {
      width: 100%;
      background-color: #fff;
      .demo-tabs{
          margin-top: -4px;
          /deep/.el-tabs__header{
            margin: 0px;
          }
          /deep/.el-tabs__header{
              .el-tabs__item.is-active{
                  font-size: 16px;
                  font-family: HarmonyOS_Sans_SC_Medium;
              }
          }
          .goods{
            max-height: 450px;
            overflow-y: auto;
            display: flex;
            flex-wrap: wrap;
            .goods_content{
              width: calc((1920px - 423px) / 3);
              height: 180px;
              background: #F3F4F7;
              border-radius: 8px;
              margin-top: 24px;
              margin-right: 24px;
              display: flex;
              align-items: center;
              position: relative;
              .image{
                width: 132px;
                height: 132px;
              }
              .message{
                margin-left: 24px;
                .message_content{
                  display: flex;
                  .type{
                    font-size: 16px;
                    font-family: HarmonyOS_Sans_SC_Bold;
                    color: #535862;
                    font-weight: bolder;
                  }
                  .terminal{
                    margin-left: 16px;
                    display: inline-block;
                    text-align: center;
                    width: 32px;
                    height: 22px;
                    line-height: 22px;
                    background: rgba(0,148,255,0.12);
                    border-radius: 6px;
                    border: 1px solid rgba(47,143,241,0.4);
                    font-size: 14px;
                    color: #2F7DF1;;
                  }
                  .headline{
                    width: 70px;
                    height: 22px;
                    font-size: 14px;
                    font-family: HarmonyOS_Sans_SC;
                    color: #989DAA;
                    line-height: 22px;
                  }
                  .headline_content{
                    height: 22px;
                    font-size: 14px;
                    font-family: HarmonyOS_Sans_SC;
                    color: #535862;
                    line-height: 22px;
                  }
                }
              }
            }
            .hidden_overdue{
              display: none;
            }
            .red_overdue{
              height: 28px;
              background: rgba(255,71,36,0.12);
              border-radius: 6px;
              border: 1px solid rgba(255,76,45,0.4);
              font-size: 14px;
              font-family: HarmonyOS_Sans_SC;
              color: #F24A45;
              line-height: 28px;
              padding-left: 8px;
              padding-right: 8px;
              position: absolute;
              top: 8px;
              right: 8px;
            }
            .green_overdue{
              height: 28px;
              background: rgba(255,179,31,0.12);
              border-radius: 6px;
              border: 1px solid rgba(255,159,58,0.4);
              font-size: 14px;
              font-family: HarmonyOS_Sans_SC;
              color: #FF8F3A;
              line-height: 28px;
              padding-left: 8px;
              padding-right: 8px;
              position: absolute;
              top: 8px;
              right: 8px;
            }
          }
      }
  }
  .detail_content{
    display: flex;
    justify-items: center;
    align-items: center;
    padding: 24px;
    padding-bottom: 0px;

    .content_img{
      width: 240px;
      height: 240px;
    }
    .detail_body{
      width: 448px;
      height: 240px;
      background: rgba(238,243,255,0.56);
      border-radius: 8px;
      margin-left: 24px;
      padding-left: 24px;
      padding-top: 16px;
      padding-bottom: 16px;
      box-sizing: border-box;
      .body_message{
        display: flex;
        .message_title{
          width: 84px;
          text-align: right;
          margin-bottom: 8px;
          font-size: 14px;
          font-family: HarmonyOS_Sans_SC;
          color: #989DAA;
        }
        .message_content{
          font-size: 14px;
          font-family: HarmonyOS_Sans_SC;
          color: #535862;
          margin-left: 10px;
        }
      }
    }
  }
  .buttonCancel{
    width: 88px;
  }
  .buttonOverdue{
    width: 88px;
    color: #F24A45;
    background: #FFFFFF;
    border-radius: 6px;
    border: 1px solid #F24A45;
  }
  // .layout-card {
  //   /deep/.card-content{
  //     padding-right: 9px !important;
  //   }
  // }
</style>
